<template>
  <div>
    <a-drawer :visible="modalVisible" width="90%" @close="handleClose">
      <a-spin :spinning="spinning" tip="导入成功，数据校验中，请稍后...">
        <a-divider orientation="left">工程量清单导入</a-divider>
        <button class="ant-btn ant-btn-dashed" type="button" @click="importdataTest">导入清单</button>
<!--        <button class="ant-btn ant-btn-dashed" type="button" @click="handleUpload">校验</button>-->
        <button class="ant-btn ant-btn-dashed" type="button" @click="clearData" style="margin-left: 5px;">清空结果</button>
        <a-table style="margin-top: 30px" rowKey="reportId" ref="msgTable" size="default" :multiple="true" :operator="operator"
                 :pagination="false" :columns="columns" :data-source="inputData" bordered
                 :scroll="{x:1500,y:650}">
        </a-table>
        <a-upload
          name="file"
          :multiple="false"
          :action="api.material.importExcelTest"
          :headers="headers"
          :data="{'projectId': projectId}"
          @change="handleChangeTest"
          :beforeUpload="beforeUpload"
          v-show="false"
          ref="updataCom"
        >
          <a-button ref="ubuttonTest"> <a-icon type="upload" /> 测试导入 </a-button>
        </a-upload>
      </a-spin>
    </a-drawer>
  </div>
</template>
<script>
  import api from './js/api'
  import Vue from 'vue'
  import axios from 'axios'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: {
      detailsParams: {},
      excelData: {},
      projectId: null
    },
    data() {
      const token = Vue.ls.get('Access-Token')
      //这里存放数据
      const operator = []
      // operator.push({
      //   name: '提交',
      //   icon: 'import',
      //   that: this,
      //   handler: function(table, that) {
      //     that.save(that.dataSource)
      //   }
      // })
      // operator.push({
      //   name: '删除',
      //   icon: 'delete',
      //   batch: true,
      //   handler: function(table) {
      //     table.remove()
      //   }
      // })
      return {
        headers: { 'Authorization': token },
        // projectId: '',
        spinning: false,
        modalVisible: false,
        selectedRowKeys: [],
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {},
        inputData: [],
        columns: [
          {
            title: '行号',
            width: 80,
            align: 'center',
            dataIndex: 'errNo',
            sorter: (a, b) => a.errNo.length - b.errNo.length
          },
          {
            title: '错误信息',
            width: 380,
            align: 'left',
            dataIndex: 'errMsg',
            sorter: (a, b) => a.errMsg.length - b.errMsg.length
          }
        ],
        operator: operator,
        dataSource: [],
        dataValue: {},
        data: [],
        selectFileCache: null
      }
    },
    methods: {
      handleShow(projectId) {
        this.inputData = []
        this.dataSource = []
        var that = this
        setTimeout(() => {
          this.projectId = projectId
        }, 100)
        that.modalVisible = true
      },
      handleClose() {
        this.spinning = false
        this.clearData()
        this.modalVisible = false
        this.$emit('changeVisible')
      },
      getecclData(projectId) {
        const me = this
        this.http.post(this, {
          url: this.api.material.impTestCkResult,
          data: {
            projectId: projectId
          },
          success: function(meta, data) {
            me.spinning = false
            if (data == null || data.length < 1) {
              me.$confirm({
                content: '校验正确，是否确认导入当前文件？',
                onOk() {
                  me.handleUpload()
                },
                cancelText: '取消'
              })
            } else {
              me.inputData = data
              me.dataSource = data
              me.$message.success('校验完成')
            }
          },
          error: function(meta, data) {
            me.spinning = false
          }
        })
      },
      beforeUpload: function(file, fileList) {
        this.selectFileCache = file
        return true
      },
      handleUpload: function() {
        const me = this
        const formData = new FormData()
        const projectIds = {
          projectId: this.projectId
        }
        formData.append('file', this.selectFileCache)
        formData.append('projectIds', projectIds)
        formData.append('projectId', this.projectId)
        axios({
          method: 'post',
          url: api.material.importExcel,
          data: formData,
          headers: me.headers
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success('导入成功')
            this.handleClose()
          } else {
            this.$message.error(res.data.message)
          }
        }).catch(err => {
          this.$message.error('导入失败')
          console.log(err)
        })
      },
      handleChangeTest: function(info) {
        if (info.file.status === 'done') {
          if (info.file.response.code === 100) {
            // this.$message.success('导入成功')
            this.spinning = true
            this.getecclData(this.projectId)
          } else {
            this.$message.error(info.file.response.message)
          }
        } else if (info.file.status === 'error') {
          this.$message.error('导入失败')
        }
      },
      importdataTest() {
        this.$refs.ubuttonTest.$el.click()
      },
      importdataCk() {
        this.getecclData(this.projectId)
      },
      clearData() {
        this.inputData = []
        this.dataSource = []
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      // th
    },
    computed: {

    }
  }
</script>

<style lang="scss" scoped>
  //@import url(); 引入公共css类
  .spin-content {
    border: 1px solid #91d5ff;
    background-color: red;
    /*padding: 30px;*/
  }
</style>

